<template>
	<view class="">
		<view class="">
			<view class="">
				<image :src="image" style="width: 100%;  height: 300rpx;" mode="scaleToFill"></image>
			</view>
			<view class="searchBox">
				<view class="searchContext">
					<u-input style="width: 100%;" v-model="from.search" :clearable="false"  placeholder-style="color: #002B56;" type="text"  placeholder="请输入VIN"  />
					<u-icon name="camera-fill" @click="scanCode"></u-icon>
				</view>
				<view class="_flex _justify_between" style="margin-top: 50rpx;">
					<view class="" style="width: 30%;">
						<u-button  type="primary" plain @click="goSearch">样例</u-button>
					</view>
					<view class="" style="width: 60%;">
						<u-button  type="primary" @click="goSearch">开始查询</u-button>
					</view>
				</view>
				<view class=""  style="margin-top: 40rpx;">
					<u-checkbox-group>
						<u-checkbox active-color="#002B56" v-model="form.checked" shape="circle">
							<text class="tip">使用本服务意味着您已经阅读并同意</text>
							<text class="tip" style="color: #002B56;">《用户协议》</text>
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {URL,BASEURL} from "../../config.js"
export default {
	data() {
		return {
			form: {
				checked:true
			},
			image: 'https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/swiper01.png?'+new Date().getTime(),
		};
	},
	methods:{
		goSearch(){
			uni.navigateTo({
				url:"./actualMileageResult"
			})
		},
		scanCode() {
			var that = this;
			uni.scanCode({
				success: function(res) {
					console.log(res)
				}
			});
		},
		}
};
</script>
<style scoped>
	.searchBox{
		padding:32rpx;
	}
	.searchBox .searchContext{
		    background: #F4F6F5;
		    display: flex;
		    /* width: 500rpx; */
		    padding: 0 32rpx;
		    border-radius: 15rpx;
			font-size: 40rpx;
			    color: #002B56;
		}
		.tip{
			font-size: 24rpx;
		}
</style>
<style>
	page{
		background-color: #fff;
	}
</style>